<template>
  <div class="app-container">
    <!-- 顶部筛选区域 -->
    <div class="filter-section">
      <el-card class="filter-card">
        <div class="filter-content">
          <!-- 左侧筛选条件 -->
          <div class="filter-left">
            <div class="time-type-tabs">
              <el-button
                :type="queryParams.timeType === 'day' ? 'primary' : ''"
                @click="handleTimeTypeChange('day')"
                class="time-tab"
              >
                日
              </el-button>
              <el-button
                :type="queryParams.timeType === 'month' ? 'primary' : ''"
                @click="handleTimeTypeChange('month')"
                class="time-tab"
              >
                月
              </el-button>
              <el-button
                :type="queryParams.timeType === 'year' ? 'primary' : ''"
                @click="handleTimeTypeChange('year')"
                class="time-tab"
              >
                年
              </el-button>
            </div>
            <div class="date-picker">
              <el-date-picker
                v-model="queryParams.selectedDate"
                :type="getDatePickerType()"
                :format="getDateFormat()"
                :value-format="getDateFormat()"
                placeholder="选择日期"
                class="date-input"
              />
            </div>
            <div class="unit-type-select">
              <span class="select-label">用能单元类型</span>
              <el-select
                v-model="queryParams.unitType"
                class="select-input"
                placeholder="请选择"
              >
                <el-option
                  v-for="option in ENERGY_UNIT_TYPE_OPTIONS"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
            </div>
          </div>

          <!-- 右侧查询按钮 -->
          <div class="filter-right">
            <el-button
              type="primary"
              @click="handleQuery"
              :loading="loading"
              class="query-btn"
            >
              查询
            </el-button>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 数据表格区域 -->
    <div class="table-section">
      <el-card class="table-card">
        <el-table
          :data="tableData"
          v-loading="loading"
          border
          style="width: 100%"
          :header-cell-style="{ textAlign: 'center' }"
        >
          <!-- 曲线选择列 -->
          <el-table-column label="曲线选择" width="100" align="center" fixed>
            <template #default="scope">
              <el-radio
                v-model="selectedUnitId"
                :label="scope.row.id"
                @change="handleUnitChange(scope.row)"
              >
                &nbsp;
              </el-radio>
            </template>
          </el-table-column>

          <!-- 用能单元名称列 -->
          <el-table-column
            prop="unitName"
            label="用能单元名称"
            width="200"
            align="center"
            fixed
          />

          <!-- 合计列 -->
          <el-table-column
            prop="total"
            label="合计"
            width="120"
            align="right"
            fixed
          >
            <template #default="scope">
              <span>{{ formatNumber(scope.row.total) }}</span>
            </template>
          </el-table-column>

          <!-- 动态时间列 -->
          <el-table-column
            v-for="(col, index) in dynamicColumns"
            :key="index"
            :prop="col.prop"
            :label="col.label"
            :min-width="col.minWidth"
            align="right"
          >
            <template #default="scope">
              <span>{{ formatNumber(scope.row[col.prop]) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>

    <!-- 折线图区域 -->
    <div class="chart-section">
      <el-card class="chart-card">
        <div class="chart-title">
          {{
            selectedUnitData ? selectedUnitData.unitName : "总表"
          }}用气量（m³）
        </div>
        <div class="chart-container">
          <v-chart :option="chartOption" class="line-chart" v-loading="loading" />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick, getCurrentInstance } from "vue";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { LineChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
} from "echarts/components";
import VChart from "vue-echarts";
import { getHourListStatistics } from "@/api/stat/home";
import { ElMessage } from "element-plus";
import {
  ENERGY_UNIT_TYPE,
  ENERGY_UNIT_TYPE_OPTIONS,
  ENERGY_TYPE,
} from "@/utils/enums";

// 注册ECharts组件
use([
  CanvasRenderer,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
]);

const { proxy } = getCurrentInstance();

// 响应式数据
const loading = ref(false);
const tableData = ref([]);
const dynamicColumns = ref([]);
const selectedUnitId = ref(null);
const selectedUnitData = ref(null);
const chartOption = ref({
  tooltip: {
    trigger: "axis",
  },
  grid: {
    left: "5%",
    right: "2%",
    bottom: "8%",
    top: "15%",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      data: [],
    },
  ],
  yAxis: [
    {
      type: "value",
    },
  ],
  series: [],
});

// 查询参数
const queryParams = reactive({
  timeType: "day", // day, month, year
  selectedDate: new Date().toISOString().split("T")[0], // 默认当天
  unitType: ENERGY_UNIT_TYPE.FACTORY, // 默认选择工厂
});

// 处理时间类型变化
function handleTimeTypeChange(type) {
  queryParams.timeType = type;
  const now = new Date();

  if (type === "day") {
    queryParams.selectedDate =
      now.getFullYear() +
      "-" +
      String(now.getMonth() + 1).padStart(2, "0") +
      "-" +
      String(now.getDate()).padStart(2, "0");
  } else if (type === "month") {
    queryParams.selectedDate =
      now.getFullYear() + "-" + String(now.getMonth() + 1).padStart(2, "0");
  } else {
    queryParams.selectedDate = String(now.getFullYear());
  }

  // 更新动态列
  updateDynamicColumns();
}

// 处理用能单元选择变化
function handleUnitChange(row) {
  selectedUnitData.value = row;
  // 更新图表显示选中单元的数据
  updateChartWithSelectedUnit(row);
}

// 获取日期选择器类型
function getDatePickerType() {
  switch (queryParams.timeType) {
    case "day":
      return "date";
    case "month":
      return "month";
    case "year":
      return "year";
    default:
      return "date";
  }
}

// 获取日期格式
function getDateFormat() {
  switch (queryParams.timeType) {
    case "day":
      return "YYYY-MM-DD";
    case "month":
      return "YYYY-MM";
    case "year":
      return "YYYY";
    default:
      return "YYYY-MM-DD";
  }
}

// 查询数据
function handleQuery() {
  loadGasData();
}

// 加载气量数据
async function loadGasData() {
  loading.value = true;
  try {
    // 更新动态列
    updateDynamicColumns();

    // 调用真实API
    const params = {
      groupType: queryParams.unitType,
      statTime: queryParams.selectedDate,
      energyType: ENERGY_TYPE.GAS,
    };

    console.log("调用API参数:", params);
    const response = await getHourListStatistics(params);
    console.log("API响应:", response);

    // 处理API数据
    if (
      response &&
      response.code === 200 &&
      response.data &&
      response.data.stats &&
      response.data.stats.length > 0
    ) {
      const apiData = processApiData(response.data);
      console.log("处理后的API数据:", apiData);

      if (apiData.length > 0) {
        tableData.value = apiData;

        // 默认选中第一行并渲染图表
        console.log("默认选中第一行数据:", apiData[0]);
        selectedUnitId.value = apiData[0].id;
        selectedUnitData.value = apiData[0];

        // 延迟渲染图表，确保DOM已更新
        setTimeout(() => {
          updateChartWithSelectedUnit(apiData[0]);
        }, 200);
      } else {
        // API返回数据为空，使用模拟数据
        console.log("API数据为空，使用模拟数据");
        const mockData = generateMockData();
        tableData.value = mockData;

        if (mockData.length > 0) {
          console.log("默认选中第一行模拟数据:", mockData[0]);
          selectedUnitId.value = mockData[0].id;
          selectedUnitData.value = mockData[0];

          // 延迟渲染图表，确保DOM已更新
          setTimeout(() => {
            updateChartWithSelectedUnit(mockData[0]);
          }, 200);
        }
      }
    } else {
      // 如果API没有数据或数据为空，使用模拟数据
      console.log("API无数据或数据为空，使用模拟数据");
      const mockData = generateMockData();
      tableData.value = mockData;

      if (mockData.length > 0) {
        console.log("默认选中第一行模拟数据:", mockData[0]);
        selectedUnitId.value = mockData[0].id;
        selectedUnitData.value = mockData[0];

        // 延迟渲染图表，确保DOM已更新
        setTimeout(() => {
          updateChartWithSelectedUnit(mockData[0]);
        }, 200);
      }
    }
  } catch (error) {
    console.error("加载气量数据失败:", error);
    ElMessage.error("加载数据失败");

    // 出错时使用模拟数据
    const mockData = generateMockData();
    console.log("出错时使用模拟数据:", mockData);
    tableData.value = mockData;

    if (mockData.length > 0) {
      console.log("出错时默认选中第一行模拟数据:", mockData[0]);
      selectedUnitId.value = mockData[0].id;
      selectedUnitData.value = mockData[0];

      // 延迟渲染图表，确保DOM已更新
      setTimeout(() => {
        updateChartWithSelectedUnit(mockData[0]);
      }, 200);
    }
  } finally {
    loading.value = false;
  }
}

// 处理API数据
function processApiData(apiData) {
  // 根据API返回的数据结构处理
  if (!apiData || !apiData.stats || !Array.isArray(apiData.stats)) {
    return [];
  }

  // 按groupId分组
  const groupedData = {};
  apiData.stats.forEach((item, index) => {
    const groupId = item.group_id;
    if (!groupedData[groupId]) {
      groupedData[groupId] = {
        id: groupId,
        unitName: item.groupName,
        total: 0,
        timeData: [],
        cost_money: 0,
        carbonEmissions: 0,
        rawData: [], // 存储原始数据用于后续处理
      };
    }

    // 存储原始数据
    groupedData[groupId].rawData.push(item);

    // 累加总计
    const value = item.sum_value || 0;
    groupedData[groupId].total += parseFloat(value);
    groupedData[groupId].cost_money += parseFloat(item.cost_money || 0);
    groupedData[groupId].carbonEmissions += parseFloat(
      item.carbonEmissions || 0
    );
  });

  // 转换为数组并填充缺失的时间段
  const result = Object.values(groupedData).map((group) => {
    const rowData = {
      id: group.id,
      unitName: group.unitName,
      total: group.total.toFixed(2),
      timeData: [],
      cost_money: group.cost_money.toFixed(2),
      carbonEmissions: group.carbonEmissions.toFixed(2),
    };

    // 根据时间类型填充时间段数据
    let timeCount = 0;
    if (queryParams.timeType === "day") {
      timeCount = 24;
      // 按原始数据的时间顺序填充
      for (let i = 0; i < timeCount; i++) {
        const propName = `time${i}`;
        const rawItem = group.rawData[i];
        const value = rawItem ? rawItem.sum_value || 0 : 0;
        rowData[propName] = parseFloat(value.toFixed(2));
        rowData.timeData.push(parseFloat(value.toFixed(2)));
      }
    } else if (queryParams.timeType === "month") {
      const [year, month] = queryParams.selectedDate.split("-").map(Number);
      timeCount = getDaysInMonth(year, month);
      // 按原始数据的时间顺序填充
      for (let i = 1; i <= timeCount; i++) {
        const propName = `time${i}`;
        const rawItem = group.rawData[i - 1];
        const value = rawItem ? rawItem.sum_value || 0 : 0;
        rowData[propName] = parseFloat(value.toFixed(2));
        rowData.timeData.push(parseFloat(value.toFixed(2)));
      }
    } else {
      timeCount = 12;
      // 按原始数据的时间顺序填充
      for (let i = 1; i <= timeCount; i++) {
        const propName = `time${i}`;
        const rawItem = group.rawData[i - 1];
        const value = rawItem ? rawItem.sum_value || 0 : 0;
        rowData[propName] = parseFloat(value.toFixed(2));
        rowData.timeData.push(parseFloat(value.toFixed(2)));
      }
    }

    // 确保timeData数组有效
    if (!rowData.timeData || rowData.timeData.length === 0) {
      console.warn("timeData为空，使用默认数据", {
        id: rowData.id,
        unitName: rowData.unitName,
        rawDataCount: group.rawData.length,
      });
      // 填充默认数据
      for (let i = 0; i < timeCount; i++) {
        rowData.timeData.push(0);
      }
    }

    console.log("处理后的数据:", {
      id: rowData.id,
      unitName: rowData.unitName,
      timeData: rowData.timeData,
      timeDataLength: rowData.timeData.length,
      rawDataCount: group.rawData.length,
    });

    return rowData;
  });

  return result;
}

// 获取指定年月的天数
function getDaysInMonth(year, month) {
  return new Date(year, month, 0).getDate();
}

// 更新动态列
function updateDynamicColumns() {
  const columns = [];

  if (queryParams.timeType === "day") {
    // 日：显示24小时
    for (let i = 0; i < 24; i++) {
      columns.push({
        prop: `time${i}`,
        label: `${i}时`,
        minWidth: 80,
      });
    }
  } else if (queryParams.timeType === "month") {
    // 月：显示当月的每一天
    const [year, month] = queryParams.selectedDate.split("-").map(Number);
    const daysInMonth = getDaysInMonth(year, month);

    for (let i = 1; i <= daysInMonth; i++) {
      columns.push({
        prop: `time${i}`,
        label: `${i}日`,
        minWidth: 80,
      });
    }
  } else if (queryParams.timeType === "year") {
    // 年：显示12个月，格式为 "2025年1月"
    const year = parseInt(queryParams.selectedDate);

    for (let i = 1; i <= 12; i++) {
      columns.push({
        prop: `time${i}`,
        label: `${year}年${i}月`,
        minWidth: 100,
      });
    }
  }

  dynamicColumns.value = columns;
}

// 生成模拟用能单元列表
function generateMockUnits() {
  const unitType = queryParams.unitType;
  let units = [];

  if (unitType === ENERGY_UNIT_TYPE.FACTORY) {
    units = [
      { id: 1, name: "1号气表" },
      { id: 2, name: "2号气表" },
      { id: 3, name: "3号气表" },
    ];
  } else if (unitType === ENERGY_UNIT_TYPE.WORKSHOP) {
    units = [
      { id: 4, name: "车间1" },
      { id: 5, name: "车间2" },
      { id: 6, name: "车间3" },
    ];
  } else if (unitType === ENERGY_UNIT_TYPE.EQUIPMENT) {
    units = [
      { id: 7, name: "设备A" },
      { id: 8, name: "设备B" },
      { id: 9, name: "设备C" },
    ];
  } else if (unitType === ENERGY_UNIT_TYPE.PROCESS) {
    units = [
      { id: 10, name: "工序1" },
      { id: 11, name: "工序2" },
      { id: 12, name: "工序3" },
    ];
  }

  return units;
}

// 生成模拟数据
function generateMockData() {
  let timeCount = 0;

  // 根据时间类型计算时间段数量
  if (queryParams.timeType === "day") {
    timeCount = 24;
  } else if (queryParams.timeType === "month") {
    const [year, month] = queryParams.selectedDate.split("-").map(Number);
    timeCount = getDaysInMonth(year, month);
  } else {
    timeCount = 12;
  }

  const units = generateMockUnits();

  // 生成表格数据
  const tableDataList = units.map((unit) => {
    const rowData = {
      id: unit.id,
      unitName: unit.name,
      total: 0,
      timeData: [],
    };

    // 生成时间段数据
    for (let i = 0; i < timeCount; i++) {
      const value = 50 + Math.random() * 100;
      rowData[`time${queryParams.timeType === "day" ? i : i + 1}`] = parseFloat(
        value.toFixed(2)
      );
      rowData.timeData.push(parseFloat(value.toFixed(2)));
    }

    // 确保timeData数组有效
    if (!rowData.timeData || rowData.timeData.length === 0) {
      console.warn("模拟数据timeData为空，重新生成");
      rowData.timeData = [];
      for (let i = 0; i < timeCount; i++) {
        const value = 50 + Math.random() * 100;
        rowData.timeData.push(parseFloat(value.toFixed(2)));
      }
    }

    console.log("生成的模拟数据:", {
      id: rowData.id,
      unitName: rowData.unitName,
      timeData: rowData.timeData,
      timeDataLength: rowData.timeData.length,
    });

    // 计算总计
    rowData.total = rowData.timeData
      .reduce((sum, val) => sum + val, 0)
      .toFixed(2);

    return rowData;
  });

  return tableDataList;
}

// 根据选中的用能单元更新图表
function updateChartWithSelectedUnit(unitRow) {
  console.log("更新图表，选中单元:", unitRow);

  if (!unitRow) {
    console.log("图表更新失败: unitRow为空");
    return;
  }

  // 验证必要的数据字段
  if (!unitRow.timeData || !Array.isArray(unitRow.timeData)) {
    console.log("图表更新失败: timeData无效", unitRow.timeData);
    return;
  }

  if (!unitRow.unitName) {
    console.log("图表更新失败: unitName为空");
    return;
  }

  // 生成X轴标签
  const categories = [];
  let timeCount = 0;

  if (queryParams.timeType === "day") {
    timeCount = 24;
    for (let i = 0; i < timeCount; i++) {
      categories.push(`${i}时`);
    }
  } else if (queryParams.timeType === "month") {
    const [year, month] = queryParams.selectedDate.split("-").map(Number);
    timeCount = getDaysInMonth(year, month);
    for (let i = 1; i <= timeCount; i++) {
      categories.push(`${i}日`);
    }
  } else {
    const year = parseInt(queryParams.selectedDate);
    timeCount = 12;
    for (let i = 1; i <= timeCount; i++) {
      categories.push(`${year}年${i}月`);
    }
  }

  // 确保数据安全
  const safeTimeData = Array.isArray(unitRow.timeData)
    ? unitRow.timeData
    : [];
  const safeUnitName = unitRow.unitName || "未知单元";

  // 更新图表配置
  chartOption.value = {
    title: {
      text: `${safeUnitName}用气量（m³）`,
      left: "center",
      top: "20px",
      textStyle: {
        color: "#333",
        fontSize: 16,
        fontWeight: "bold",
      },
    },
    tooltip: {
      trigger: "axis",
    },
    grid: {
      left: "5%",
      right: "2%",
      bottom: "8%",
      top: "15%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: categories,
        axisLine: {
          lineStyle: {
            color: "#ddd",
          },
        },
        axisLabel: {
          show: true,
          color: "#666",
          fontSize: 12,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        splitNumber: 4,
        splitLine: {
          lineStyle: {
            type: "dashed",
            color: "#f0f0f0",
          },
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#333",
          },
        },
        axisLabel: {
          show: true,
          color: "#666",
          fontSize: 12,
        },
        nameTextStyle: {
          color: "#999",
        },
        splitArea: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: safeUnitName,
        type: "line",
        data: safeTimeData,
        lineStyle: {
          normal: {
            width: 8,
            color: {
              type: "linear",
              colorStops: [
                {
                  offset: 0,
                  color: "#32b7cb",
                },
                {
                  offset: 1,
                  color: "#4fdaca",
                },
              ],
              globalCoord: false,
            },
            shadowColor: "rgba(79,218,202, 0.3)",
            shadowBlur: 10,
            shadowOffsetY: 20,
          },
        },
        itemStyle: {
          normal: {
            color: "#fff",
            borderWidth: 10,
            borderColor: "#4fdaca",
          },
        },
        smooth: true,
      },
    ],
  };
}

// 格式化数字
function formatNumber(value) {
  if (!value) return "0";
  return parseFloat(value).toLocaleString();
}

// 页面初始化
onMounted(() => {
  nextTick(() => {
    loadGasData();
  });
});
</script>

<style lang="scss" scoped>
.app-container {
  padding: 12px;
  background: #f1f2f5;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

// 筛选区域样式
.filter-section {
  margin-bottom: 8px;
  flex-shrink: 0;

  .filter-card {
    border-radius: 0;
    box-shadow: none;

    .filter-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 12px;

      .filter-left {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;

        .time-type-tabs {
          display: flex;
          gap: 0;
          border: 1px solid #dcdfe6;
          border-radius: 6px;
          overflow: hidden;

          .time-tab {
            border: none;
            border-radius: 0;
            min-width: 50px;
            height: 32px;
            font-size: 14px;
            background: #ffffff;
            color: #606266;

            &:not(:last-child) {
              border-right: 1px solid #dcdfe6;
            }

            &.el-button--primary {
              background: #4fdaca;
              color: white;
              border-color: #4fdaca;
            }

            &:hover:not(.el-button--primary) {
              background: #f5f7fa;
            }
          }
        }

        .date-picker {
          .date-input {
            width: 160px;
            height: 32px;
          }
        }

        .unit-type-select,
        .factory-select {
          display: flex;
          align-items: center;
          gap: 8px;

          .select-label {
            font-size: 14px;
            color: #606266;
            white-space: nowrap;
          }

          .select-input {
            width: 120px;
            height: 32px;
          }
        }
      }

      .filter-right {
        .query-btn {
          border-radius: 6px;
          height: 32px;
          background: #4fdaca;
          border-color: #4fdaca;

          &:hover {
            background: #32b7cb;
            border-color: #32b7cb;
          }
        }
      }
    }
  }
}

// 表格区域样式
.table-section {
  margin-bottom: 8px;
  flex: 1; // 占据一半空间
  min-height: 200px; // 设置最小高度
  height: 0; // 配合flex使用

  .table-card {
    border-radius: 0;
    box-shadow: none;
    height: 100%;
    display: flex;
    flex-direction: column;

    :deep(.el-card__body) {
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      flex: 1;
      min-height: 0;
    }
  }
}

// 图表区域样式
.chart-section {
  flex: 1; // 占据剩余空间
  min-height: 300px; // 设置最小高度
  height: 0; // 配合flex使用

  .chart-card {
    border-radius: 0;
    box-shadow: none;
    height: 100%;
    display: flex;
    flex-direction: column;

    .chart-title {
      padding: 8px 12px 4px;
      font-size: 14px;
      color: #333;
      font-weight: 500;
      flex-shrink: 0; // 防止标题被压缩
    }

    .chart-container {
      padding: 0 12px 12px;
      flex: 1; // 占据剩余空间
      min-height: 0; // 允许flex子项收缩

      .line-chart {
        width: 100%;
        height: 100%;
        min-height: 250px; // 设置最小高度
        display: block; // 确保块级显示
      }
    }
  }
}

// Element Plus 组件样式覆盖
:deep(.el-card__body) {
  padding: 0;
}

:deep(.el-table) {
  border-radius: 0 !important;
  box-shadow: none !important;

  .el-table__header {
    background: transparent !important;

    tr {
      background: transparent !important;
    }

    th {
      background: #ffffff !important;
      color: #2c3e50;
      font-weight: 600;
      border-bottom: 1px solid #e4e7ed;
    }
  }

  .el-table__row {
    &:hover > td {
      background-color: #f5f7fa !important;
    }
  }

  td {
    background: #ffffff !important;
    border-bottom: 1px solid #f0f0f0;
  }

  // 固定列样式 - 确保有白色背景
  .el-table__fixed {
    background: #ffffff !important;

    .el-table__fixed-header-wrapper {
      th {
        background: #ffffff !important;
      }
    }

    .el-table__fixed-body-wrapper {
      td {
        background: #ffffff !important;
      }

      .el-table__row {
        &:hover > td {
          background-color: #f5f7fa !important;
        }
      }
    }
  }
}

:deep(.el-select) {
  .el-select__wrapper {
    border-radius: 6px;

    &:hover {
      border-color: #4fdaca;
    }

    &.is-focused {
      border-color: #4fdaca;
      box-shadow: 0 0 0 2px rgba(79, 218, 202, 0.2);
    }
  }
}

:deep(.el-date-editor) {
  .el-input__wrapper {
    border-radius: 6px;

    &:hover {
      border-color: #4fdaca;
    }

    &.is-focus {
      border-color: #4fdaca;
      box-shadow: 0 0 0 2px rgba(79, 218, 202, 0.2);
    }
  }
}

:deep(.el-button) {
  border-radius: 6px;

  &.el-button--primary {
    background: linear-gradient(135deg, #4fdaca 0%, #32b7cb 100%);
    border-color: #4fdaca;

    &:hover {
      background: linear-gradient(135deg, #32b7cb 0%, #4fdaca 100%);
    }
  }
}

// 时间类型按钮组特殊样式
.time-type-tabs {
  :deep(.el-button) {
    border-radius: 0 !important;
    border: none !important;

    &.time-tab {
      background: #ffffff !important;
      color: #606266 !important;

      &.el-button--primary {
        background: #4fdaca !important;
        color: white !important;
      }

      &:hover:not(.el-button--primary) {
        background: #f5f7fa !important;
      }

      &:focus {
        outline: none;
        box-shadow: none;
      }
    }
  }
}
</style>
